<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>07、事件指令-v-on-按键修饰符.html</title>
    <style>
        [v-cloak] {
            display: none
        }
        table{width: 100%;border-collapse: collapse}
        table td{border:1px solid #ccc;padding:10px;}
    </style>
</head>
<body>
<!--第三步：指定vue从那个dom元素进行渲染和管理  ------------  view角色-->
<div id="app" >
    <div>
        <table>
            <thead>
                <tr>
                    <td>id</td>
                    <td>名字</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr @click="parentclick">
                    <td>1</td>
                    <td>yykk</td>
                    <td>
                        <button @click.stop.once="edit">编辑</button>
                        <button @click.stop.once="del">删除</button>
                    </td>
                </tr>
                <tr @click="parentclick">
                    <td>2</td>
                    <td>yykk2</td>
                    <td>
                        <button @click.stop.once="edit">编辑</button>
                        <button @click.stop.once="del">删除</button>
                    </td>
                </tr>

                <tr @click="parentclick">
                    <td>3</td>
                    <td>yykk3</td>
                    <td>
                        <button @click.stop.once="edit">编辑</button>
                        <button @click.stop.once="del">删除</button>
                    </td>
                </tr>


            </tbody>
        </table>
    </div>
</div>
<!--第一步：引入vue.global.js文件-->
<script src="js/vue.min.js"></script>
<!--第二步：初始化一个vue实例-->
<script>
    //怎么去理解mvvm
    const vm = new Vue({//--------------vm角色
        el: "#app",
        // 数据模型
        data: {//------------------------model的角色
            message: "Hello Vue3.x"
        },
        // 事件必须定义在methods中，
        methods: {
            parentclick(){
              alert("点击tr出发事件----parent")
            },
            edit() {
                alert("---children")
            },
            del() {
                alert("删除 ---children")
            }
        }
    })
</script>
</body>
</html>